<template>
  <div class="blog-container">
    <el-tabs v-model="activeTab" style="padding-left:1vh;">
      <el-tab-pane label="博文类型管理" name="library">
        <el-card class="blog-card">
          <div class="card-box">
            <div class="filter-box">
              <div style="display: inline-block">
                <el-button type="primary" @click="showTypeVisible">添加</el-button>
              </div>
              <div class="filter-region">
                <el-form :inline="true" :model="filter" class="demo-form-inline">
                  <el-form-item label="创建人">
                    <el-select
                      v-model="filter.userId"
                      filterable
                      remote
                      clearable
                      no-match-text="无匹配数据"
                      no-data-text="无匹配数据"
                      placeholder="请输入创建人姓名"
                      :remote-method="remoteSearchUser"
                    >
                      <el-option
                        v-for="item in user"
                        :key="item.id"
                        :label="item.realName"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="一级类型">
                    <el-input v-model="filter.type" placeholder="请输入内容" />
                  </el-form-item>
                  <el-form-item label="创建时间">
                    <el-date-picker
                      v-model="dateList"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      @change="handleDateChange"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="fetch">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="card-list">
              <el-table
                :data="typeList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                :default-expand-all="false"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              >
                <el-table-column
                  prop="type"
                  label="类型"
                  sortable
                  min-width="15%"
                />
                <el-table-column
                  prop="remark"
                  label="备注"
                  sortable
                  show-overflow-tooltip
                  min-width="40%"
                />
                <el-table-column
                  prop="createDate"
                  label="创建日期"
                  sortable
                  min-width="15%"
                />
                <el-table-column
                  prop="createName"
                  label="创建人"
                  sortable
                  min-width="10%"
                />
                <el-table-column
                  fixed="right"
                  label="操作"
                  min-width="20%"
                >
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.level !== '3'" type="text" size="small" @click="addType(scope.row)">追加</el-button>
                    <el-button type="text" size="small" @click="editType(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" style="color: rgba(239,85,85,0.76)" @click="deleteType(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pagination.size"
                :current-page="pagination.current"
                :total="pagination.total"
                @current-change="fetch"
              />
            </div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="博文类型展览" name="show">配置管理</el-tab-pane>
    </el-tabs>

    <el-dialog :title="title" :visible.sync="type_visible" width="60vh">
      <el-form :model="type_form">
        <el-form-item label="博文类型名称" label-width="12vh">
          <el-input v-model="type_form.type" autocomplete="off" />
        </el-form-item>
        <el-form-item label="博文等级" label-width="12vh">
          <el-select v-model="type_form.level" placeholder="请选择博文等级" :disabled="selectDisabled" @change="changeLevel">
            <el-option label="就业方向" value="1" />
            <el-option label="学术范围" value="2" />
            <el-option label="具体知识点" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="show_parentId" label="上级博文类型" label-width="12vh">
          <el-select v-model="type_form.parentId" placeholder="请选择上级博文类型" @change="change">
            <el-option v-for="item in parentList" :key="item.id" :label="item.type" :disabled="selectDisabled" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="12vh">
          <el-input
            v-model="type_form.remark"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            autosize
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelTypeDialog">取 消</el-button>
        <el-button type="primary" @click="createOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteType, editType, queryBlogType, queryParent, saveType } from '@/api/article'
import { queryUserInfo } from '@/api/user'

export default {
  data() {
    return {
      activeTab: 'library',
      type_visible: false,
      show_parentId: false,
      selectDisabled: false,
      title: '添加博文类型',
      type_form: {},
      typeList: [],
      filter: {
      },
      dateList: [],
      user: [],
      parentList: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 分页显示博文类型
    async fetch(e) {
      if (typeof e === 'number') {
        this.pagination.current = e
      }
      const { pagination, filter } = this
      const params = { ...filter, ...pagination }
      const res = await queryBlogType(params)
      console.log(res)
      const data = res.data
      this.typeList = data.records
      const { current, size, total } = data
      this.pagination = { current, size, total }
    },
    // 封装等级不为1工具函数
    async LevelNotOne(level) {
      if (level !== '1') {
        const res = await queryParent(level)
        console.log('queryParent =>' + res)
        this.parentList = res.data
        this.show_parentId = true
      }
    },
    async UserSelected() {
    },
    // 编辑博文类型
    async editType(row) {
      console.log('编辑博文类型 =>' + row)
      this.title = '编辑博文类型'
      const { id, parentId, remark, type, level } = row
      await this.LevelNotOne(level)
      this.type_form = { id, parentId, remark, type, level }
      this.type_visible = true
      this.selectDisabled = true
    },
    // 追加下级博文类型
    async addType(row) {
      this.title = '追加下级博文类型'
      console.log('追加下级博文类型 =>' + row)
      const { id, level } = row
      const index = (Number.parseInt(level) + 1).toString()
      await this.LevelNotOne(index)
      this.type_form = { parentId: id, level: index }
      console.log('type_form =>' + this.type_form)
      this.type_visible = true
      this.selectDisabled = true
    },
    // 删除指定id得博文类型
    async deleteType(id) {
      this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await deleteType(id)
          await this.fetch()
        } catch (error) {
          console.log(error)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击添加按钮打开 添加/修改弹出框表单
    showTypeVisible() {
      this.title = '添加博文类型'
      this.type_form.level = '1'
      this.type_visible = true
    },
    async selectParent(id) {
      const res = await queryParent(id)
      console.log('selectParent =>' + res)
      this.parentList = res.data
      this.type_form.parentId = res.data[0].id
    },
    // 改变等级
    changeLevel(e) {
      console.log(e)
      this.$forceUpdate()
      if (typeof e === 'string') {
        if (e !== '1') {
          this.show_parentId = true
          this.selectParent(e)
        } else {
          this.show_parentId = false
          this.parentList = []
        }
      }
    },
    // 添加活修改博文列表
    async createOrUpdate() {
      const { id } = this.type_form
      console.log('createOrUpdate methods id 类型 => ' + typeof id)
      let res
      if (typeof id === 'undefined') {
        res = await saveType(this.type_form)
        console.log('添加操作 =>' + res)
      } else {
        res = await editType(this.type_form)
        console.log('修改操作 =>' + res)
      }
      this.cancelTypeDialog()
      await this.fetch()
    },
    // 取消博文分类弹出框
    cancelTypeDialog() {
      this.parentList = []
      this.type_form = {}
      this.type_visible = false
      this.show_parentId = false
      this.selectDisabled = false
    },
    // 下拉框改变事件
    change() {
      this.$forceUpdate()
    },
    // 远程搜索姓名展示人员下拉框
    async remoteSearchUser(name) {
      console.log('remoteSearchUser =>' + name)
      const params = { name }
      const res = await queryUserInfo(params)
      this.user = res.data
    },
    // 日期格式change转换
    handleDateChange(value) {
      this.filter.startTime = value ? `${value[0]} 00:00:00` : ''
      this.filter.endTime = value ? `${value[1]} 23:59:59` : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.blog {
  &-container {
    font-size: 30px;
    min-height: calc(96vh);
    background: #f2f3f7;
  }
  &-card {
    margin: 1px 1vh 0 1vh;
  }
}
.card {
  &-box {
    width: 100%;
  }
}
.filter{
  &-box {
    border-bottom: 1px solid #ccc;
    width: 100%;
  }
  &-region {
    display: inline-block;
    margin-left: 2vh;
  }
}
</style>
